<template v-slot="scope">
   <div class="box">
    <div class="search">
      <div class="search-input">
        <el-input
          placeholder="输入职位名称"
          v-model="input"
          clearable
          />
      </div>
      <div class="search-search">
        <el-button type="primary">查询</el-button>
      </div>
      <div class="search-searchw">
          <el-button type="primary"  @click="addArticle = true">增加</el-button>
        </div>
    </div>
    <div class="body">
      <ul>
        <li>
          <ul>
            <li>企业职位</li>
            <li>需要人数</li>
            <li>应聘类型</li>
            <li>分类</li>
            <li>地点</li>
            <li>操作</li>
          </ul>
        </li>
        <li v-for="(item,index) in persons" :key="index">
          <ul>
           <li>{{item.name}}</li>
            <li>{{item.position}}</li>
            <li>{{item.types}}</li>
            <li>{{item.classification}}</li>
            <li>{{item.location}}</li>
            <li>
                <el-button type="warning" @click="dialogFormVisible = true">修改</el-button>
                <el-button type="danger"  @click="delet(index)">删除</el-button>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <el-dialog title="修改职位" v-model="dialogFormVisible" width="30%" center>
        <el-form :model="form">
          <el-form-item label="职位名称">
            <el-input v-model="form.name1" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="需要人数">
             <el-input v-model="form.name2" autocomplete="off"></el-input>
           
          </el-form-item>
          <el-form-item label="应聘类型">
            <div class="block" style="width:100%;height: 100%;border-radius: 3px;">
              <el-input v-model="form.name3" autocomplete="off"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="具体分类">
            <div class="block" style="width:100%;height: 100%;border-radius: 3px;">
              <el-input v-model="form.name4" autocomplete="off"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="具体地点">
            <div class="block" style="width:100%;height: 100%;border-radius: 3px;">
              <el-input v-model="form.name5" autocomplete="off"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <div style="width: 100%;text-align: center;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>


       <el-dialog title="增加职位" v-model="addArticle" width="30%" center>
        <el-form :model="form">
          <el-form-item label="职位名称">
            <el-input v-model="form.name1" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="需要人数">
             <el-input v-model="form.name2" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="融资类型">
              <el-dropdown>
              <span class="el-dropdown-link">
                <el-input v-model="form.name2" autocomplete="off"></el-input>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="aaa">
                  <el-dropdown-item>股权融资</el-dropdown-item>
                  <el-dropdown-item>债权融资</el-dropdown-item>
                  <el-dropdown-item>银行贷款</el-dropdown-item>
                  <el-dropdown-item disabled>融资租赁</el-dropdown-item>
                  <el-dropdown-item divided>股票融资</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
        </el-form>
        
        <div style="width: 100%;text-align: center;">
          <el-button @click="addArticle = false">取 消</el-button>
          <el-button type="primary" @click="addArticle = false">确 定</el-button>
        </div>
      </el-dialog>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="500"
      />
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        input: '',
        dialogFormVisible: false,//修改页面
        addArticle:false,//添加文章页面
        textarea:"",
        successTags: [],//修改页面的已选择标签
        addTags:[],//增加页面
        form: {
          name1: '',
        },
          persons: [
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
          {name: 'Java开发工程师', position:'10',types:'实习',classification:'社招/校招',location:'312'},
        ]
      }
    },
     methods: {
      delet(index) {
        this.persons.splice(index, 1) 
      },
      handleClose(tag) {//删除修改页面的已选择标签
        this.successTags.splice(this.successTags.indexOf(tag), 1);
      },
      add(tag){
        this.addTags.splice(this.addTags.indexOf(tag),1);
      }
    },
}

</script>

<style scoped>
     .box{
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    }
    .title{
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    }
    .search{
    width: 100%;
    height: 60px;
    line-height: 60px;
    }
    .search-input{
    width: 300px;
    height: 100%;
    float: left;
    }
    .search-search{
    width: 130px;
    height: 100%;
    float: left;
    margin-left: 20px;
    }
    .search-input .el-input{
    height: 40px !important;
    font-size: 17px;
    }
    .search-search .el-button{
    width: 100px;
    height: 38px;
    font-size: 14px;
    }
    .search-searchw .el-button{
    width: 100px;
    height: 38px;
    font-size: 14px;
    }
    .body{
    width: 100%;
    height: 490px;
    margin-top: 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    }
    li{
    list-style: none;
    }
    .body>ul>li{
    width: 100%;
    }
    .body>ul>li:nth-of-type(1)~li>ul{
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #ccc;
    }
    .body>ul>li:last-of-type>ul{
    border-style: hidden !important;
    }
    .body>ul>li>ul>li{
    float: left;
    width: 199px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }
    .body>ul>li>ul>li>.el-button:nth-of-type(1){
    background-color: #ffb800;
    width: 60px;
    height: 30px;
    }
    .body>ul>li>ul>li>.el-button:nth-of-type(1):hover,.body>ul>li>ul>li>.el-button:nth-of-type(2):hover{
    opacity: 0.4;
    }
    .body>ul>li>ul>li>.el-button:nth-of-type(2){
    background-color: red;
    width: 60px;
    height: 30px;
    }
    .body>ul>li:nth-of-type(1){
    display: inline-block;
    background-color: #eee;
    }
    .pagination{
    width: 100%;
    margin-top: 15px;
    }
    .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  .aaa{
    width:200px;
    height: 180px;
  }
</style>